<template>
  <view v-if="cart.length !== 0">
    <my-address></my-address>
    <view class="cartMain">
      <view class="cartHeader">
        <uni-icons class="icon" type="shop" size="20"></uni-icons>
        <text>购物车</text>
      </view>
      <uni-swipe-action>
        <block v-for="(item, index) in cart" :key="index">
          <uni-swipe-action-item :right-options="options" @click="onClick(item.goods_id)">
            <my-goods @radio-change="radioChange" @num-change="numChange" :goods="item" :isShow="true"></my-goods>
          </uni-swipe-action-item>
        </block>
      </uni-swipe-action> 
    </view>
    <my-settle></my-settle>
  </view>
  <view class="empty" v-else>
    <image src="../../static/empty.png"></image>
    <text>购物车饿扁了…</text>
  </view>
</template>

<script>
  import badge from '@/mixins/tabbar-badge.js'
  import { mapState, mapMutations} from 'vuex'
  export default {
    mixins: [badge],
    computed: {
      ...mapState('m_cart', ['cart'])
    },
    data() {
      return {
        options: [{
        				text: '删除',
        				style: {
        					backgroundColor: '#dd524d'
        				}
        }]
      };
    },
    methods: {
      ...mapMutations('m_cart', ['changeCartState', 'changeCount', 'deleteCart']),
      radioChange(e){
        this.changeCartState(e)
      },
      numChange(e){
        this.changeCount(e)
      },
      onClick(id){
        this.deleteCart(id)
      }
    }
  }
</script>

<style lang="scss">
  .cartMain {
    padding-bottom: 100rpx;
    .cartHeader {
      padding: 15rpx;
      display: flex;
      align-items: center;
      font-size: 26rpx;
      border-bottom: 2rpx solid #efefef;
      .icon {
        margin-right: 15rpx;
      }
    }
  }
  .empty {
    padding-top: 300rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    image {
      width: 200rpx;
      height: 200rpx;
    }
    text {
      font-size: 28rpx;
      color: gray;
    }
  }
</style>
